<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../../dist/fullcalendar.css' rel='stylesheet' />
<link href='../../dist/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='../../node_modules/moment/moment.js'></script>
<script src='../../node_modules/jquery/dist/jquery.js'></script>
<script src='../../dist/fullcalendar.js'></script>
<script>

  $(document).ready(function() {

    $('#calendar').fullCalendar({
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,week,day'
      },
      initialDate: '2014-04-05',
      initialView: 'day',
      selectable: true,
      timeZone: 'local',
      dayClick: function(date) {
        console.log('dayClick', date.format());
      },
      select: function(start, end) {
        console.log('select', start.format(), end.format(), start.isBefore(end));
        var title = prompt('Event Title:');
        var eventData;
        if (title) {
          eventData = {
            title: title,
            start: start,
            end: end
          };
          $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
        }
        $('#calendar').fullCalendar('unselect');
      }
    });

  });

</script>
<style>

  body {
    margin: 40px 10px;
    padding: 0;
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    font-size: 14px;
  }

  #calendar {
    max-width: 900px;
    margin: 0 auto;
  }

</style>
</head>
<body>

  <p style='text-align:center;margin-bottom: 3em'>
    To recreate, set computer's timezone to Australia/Sydney, open in Safari, and try to select any time after 3pm.
  </p>

  <div id='calendar'></div>

</body>
</html>
